<template>
  <div class="genderpie-charts-components">
    <div class="genderpie-charts-wrapper">
      <h5 class="chart-title">
        性别分布<span class="text-unit">(%)</span>
      </h5>
      <chart :options="options"
             :init-options="initOptions"
             auto-resize
             class="echarts-item">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/graphic'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import options from './echartsOptions.js'

export default {
  name: 'genderpie-charts-components',
  components: {
    chart: ECharts
  },
  data () {
    return {
      options,
      initOptions: {
        renderer: 'canvas'
      }
    }
  },
  props: {
    gender: {
      default: null
    }
  },
  watch: {
    'gender': function () {
      let initOptions = options
      if (this.gender && (this.gender[0] + this.gender[1]) > 0) {
        let arr = []
        initOptions.title.text = '性别分布'
        initOptions.title.subtext = '统计人数' + (this.gender[0] + this.gender[1]) + '人'
        arr.push({value: this.gender[0], name: '男性'})
        arr.push({value: this.gender[1], name: '女性'})
        initOptions.series[0]['data'] = arr
      } else {
        initOptions.title.text = ''
        initOptions.title.subtext = ''
        initOptions.series[0]['data'] = []
      }
      /**
       * [if description] 如果没有图表数据的时候, 显示tooltip
       * @param  {Number} initOptions.series[0]['data'].length [description]
       */
      initOptions.graphic[0]['style']['fill'] = (
        initOptions.series[0]['data'].length === 0
      ) ? '#000' : 'transparent'
      return initOptions
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .genderpie-charts-components {
      width:50%;
      height:350px;
      margin-bottom:20px;
    .genderpie-charts-wrapper {
      height:330px;
      .chart-title {
        margin:0;
        box-sizing: border-box;
        /* padding-left: 30px; */
        font-size: 14px;
        line-height: 28px;
        .text-unit{
          font-size: 12px;
          color: #888;
          font-weight: 400;
          padding-left: 5px;
        }
      }
      .echarts-item {
        width: 100%;
        height:330px;
        overflow: hidden;
      }
    }
  }
</style>
